<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素类型转换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            display: none;/*隐藏元素*/
            display: inline;/*转换为行内元素*/
            display: block;/*转换为块级元素*/
            display: inline-block;/*以行内元素形式排列，以块级元素样式显示*/
        }
    </style>
</head>
<body>
    <h2>块级元素</h2>
        <!--
            块级元素：
                1、默认占据一行
                2、自动换行
                3、支持添加宽度和高度
                4、可以嵌套任意内容
                5、支持margin和padding
                常见的块级元素：div h p ul>li ol>li table form
        -->
    <div>
        <p>我叫董忠凯</p>
        <ul>
            <li>今年18岁</li>
        </ul>
    </div>
    <h2>行内元素</h2>
        <!--
            行内元素：
                1、不自动换行，只占据自己应该占据的位置
                2、不支持添加宽度和高度
                3、行内元素不能嵌套块级元素
                4、margin上下无效，左右有效
                5、padding上下无效 左右有效
                6、只对自身有效
                常见的行内元素：a b span i del
         -->
</body>
</html>